<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格2</title>

    <style>
      /* 
      使用css设置边框，关键点：给td元素设置边框
      */
      table {
        /* border-bottom: 1px solid #ff0000; 
            border-right: 1px solid #ff0000;  */

        color: #333;
        font-size: 12px;
      }

      table tr:hover {
        background-color: #f1f2f7;
      }

      table td {
        border-bottom: 1px solid #ebeef3;
        /* border-top: 1px solid #ff0000;  */
        padding: 10px;
        line-height: 1.4;
      }

      table th {
        text-align: left;
        padding: 10px;
        line-height: 1.4;
        background-color: #ebedf2;
        color: #717698;
        font-weight: 400;
      }

      .opt {
        color: #5b73ff;
        margin-right: 5px;
      }

      .red {
        color: #ff0000;
      }
    </style>
  </head>

  <body>
    <table class="test" cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="50" />
        <col width="50" />
        <col width="50" />
        <col width="50" />
        <col width="50" />
        <col width="200" />
        <col width="200" />
        <col width="50" />
        <col width="150" />
      </colgroup>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>职位</th>
          <th>描述</th>
          <th>创建时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>

      <tr>
        <td>1</td>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
        <td>研发</td>
        <td>描述11111111</td>
        <td>2019-12-10 08:12:32</td>
        <td>停用</td>
        <td>
          <span class="opt">详情</span>
          <span class="opt">编辑</span>
          <span class="opt red">删除</span>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>21</td>
        <td>男</td>
        <td>测试</td>
        <td>描述22222</td>
        <td>2020-10-20 05:22:05</td>
        <td>启用</td>
        <td>
          <span class="opt">详情</span>
          <span class="opt">编辑</span>
          <span class="opt red">删除</span>
        </td>
      </tr>
    </table>
  </body>
</html>
